<template>
  <el-card class="similar-funds-card" shadow="hover" border-radius="12px">
    <template #header>
      <div class="card-header">
        <el-tag type="primary">相似基金推荐</el-tag>
      </div>
    </template>

    <div v-if="loading" class="loading-state">
      <el-skeleton :rows="3" :width="['100%']" />
    </div>

    <div v-else-if="hasError" class="error-state">
      <p>获取相似基金失败</p>
      <el-button size="small" type="text" @click="fetchSimilarFunds">重试</el-button>
    </div>

    <div v-else-if="similarFunds.length > 0" class="funds-list">
      <div v-for="fund in similarFunds" :key="fund.fundCode" class="fund-item"
        @click="$router.push(`/fund-profile/${fund.fundCode}`)">
        <div class="fund-code">{{ fund.fundCode }}</div>
        <div class="fund-reason">{{ fund.reason }}</div>
      </div>
    </div>

    <div v-else class="no-data">暂无相似基金推荐</div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getSimilarFunds } from '@/api/fundApi'

const props = defineProps({
  fundCode: {
    type: String,
    required: true,
    description: '当前基金代码'
  }
})

// 状态管理
const similarFunds = ref([])
const loading = ref(false)
const hasError = ref(false)

// 获取相似基金数据
const fetchSimilarFunds = async () => {
  if (!props.fundCode) return

  try {
    loading.value = true
    hasError.value = false

    const response = await getSimilarFunds(props.fundCode)
    similarFunds.value = response.data?.recommendedFunds || []
  } catch (error) {
    console.error('获取相似基金失败:', error)
    hasError.value = true
    ElMessage.error('获取相似基金失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchSimilarFunds()
})
</script>

<style scoped>
.similar-funds-card {
  margin-bottom: 24px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.funds-list {
  padding: 10px 0;
}

.fund-item {
  padding: 12px 10px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.fund-item:last-child {
  border-bottom: none;
}

.fund-item:hover {
  background-color: #f9fafb;
}

.fund-code {
  font-weight: 500;
  margin-bottom: 4px;
  color: #1890ff;
}

.fund-reason {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.loading-state {
  padding: 15px 10px;
}

.error-state {
  text-align: center;
  padding: 20px 0;
  color: #f56c6c;
}

.no-data {
  color: #999;
  text-align: center;
  padding: 20px 0;
}
</style>